<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>javascript01</title>
		<meta name="description" content="" />
		<meta name="author" content="ch choongang" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>

	<body>
		<script>
			//타입이 없다. var는 전역변수 선언, 없으면 지역변수
		 	var a=10;
			var b="hello";
			var c=true;
			d=0;
			e="bye";
			
			//create Object
			person=new Object();
			person.name="김씨";
			person.age="30";
			person.city="서울";
			console.log("person?", person);
			console.log("b 나는 var b=hello", b);
			
			lion={name:"라이거",age:5, city:"서울동물원"};
			console.log("lion?",lion);
			
			function hello(){
				//objectName.proertyName 속성
				d=b.length;
				a++;
				//objectName.methodName() 메서드
				alert("hello".toUpperCase()+a+"hello의 길이는"+d);
			}
			
			function Taxi (money, location) {	//속
				this.money=money;
				this.location=location;
				this.changeMoney=changeMoney;
				
				function changeMoney(newMoney){	//메서
					this.money=newMoney;
				}
			}
			//위의 Taxi 펑션을 호출하자
			taxi1=new Taxi(3000, "강북");
			console.log("taxi1?", taxi1);
			taxi1.changeMoney(5000);
			console.log("taxi1?", taxi1);
			
			for(x in taxi1){
				console.log("taxi[x]?",taxi1[x]);
			}
			for(x in lion){
				console.log("lion[x]?",lion[x]);
			}
			
		</script>
		<button onclick="hello()">누르세요</button>
		<script>
			buttons=document.getElementsByTagName("button");
			button=buttons[0];
			for(x in button){
				console.log("button에는 무엇이 있는가",button[x]);
			}
			date1=new Date();
			date2=new Date(2013, 0, 9);
			document.write(date1 + "<br>");
			document.write(date2 + "<br>");
			
			web=new Array();
			document.write("값 셋팅전의 web="+web);
			console.log("값 셋팅전의 web=",web);
			web[0]="HTML5";
			web[1]="java script";
			web[2]="css3";
			document.write("값 셋팅후의 web="+web);
			console.log("값 셋팅전의 web=",web);
			
			day=["아침", "점심", "저녁"];	 //배열
			console.log("day=",day);
			console.log("button",button);
		</script>
		<div id="c">클릭해 보세요</div>
		<div id="on">마우스를 올려보세요</div>
		<div id="off">여기에서 마우스버튼을 띠어보세요</div>
		<div id="canvas">그림판</div>
		<script>
			c=document.getElementById("c");
			on=document.getElementById("on");
			off=document.getElementById("off");
			canvas=document.getElementById("canvas");
			//이벤트(사건 - 사람이 만들기도 하고..) 처리
			console.log("이전 c",c);
			c.onclick=function(){
				canvas.innerHTML="c 클릭했군요";
			}
			c.innerHTML="하하하하";
			
			console.log("이후 c",c);
			on.onclick=function(){
				canvas.innerHTML += "on 마우스 올렸군"
			}
			off.onclick=function(){
				canvas.innerHTML ="off 마우스 버튼을 "+"눌렀다 놓았군요";
			}

			
		</script>
	</body>
</html>
